<template>
  <div class="app">
    <h1 class="title">能源计划</h1>
    <div class="line"></div>

    <div class="menu-container">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo fixed-menu"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >

        <!-- 运行按钮 -->
        <el-menu-item class="run-btn" index="/database/listdatabase">
          <el-icon><VideoPlay /></el-icon>
          <span>查看项目</span>
        </el-menu-item>
        <el-menu-item class="run-btn" index="/database/createdatabase">
          <el-icon><VideoPlay /></el-icon>
          <span>新建项目</span>
        </el-menu-item>
        <el-menu-item class="run-btn" index="/database/switchdatabase">
          <el-icon><VideoPlay /></el-icon>
          <span>切换项目</span>
        </el-menu-item>

        <!-- 基础导航 -->
        <el-menu-item index="/DaoHang/ji_chu">基础参数</el-menu-item>
        <el-menu-item index="/DaoHang/duan_qi">短期规划</el-menu-item>
        <el-menu-item index="/DaoHang/chang_qi">长期规划</el-menu-item>
        <el-menu-item index="/DaoHang/ke_kaoxing">可靠性分析</el-menu-item>




        <el-menu-item class="run-btn" index="">
          <el-icon><VideoPlay /></el-icon>
          <span>计算短期规划</span>
        </el-menu-item>
        <el-menu-item class="run-btn" index="">
          <el-icon><VideoPlay /></el-icon>
          <span>计算长期规划</span>
        </el-menu-item>
        <el-menu-item class="run-btn" index="">
          <el-icon><VideoPlay /></el-icon>
          <span>计算可靠性分析</span>
        </el-menu-item>

      </el-menu>
    </div>

    <router-view></router-view>
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { computed } from 'vue'
import { VideoPlay } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

const activeIndex = computed(() => {
  // 如果有 meta.activeMenu 就用它，否则用当前路径
  return route.meta.activeMenu || route.path
})

const handleSelect = (key: string) => {
  router.push(key)
}
</script>

<style scoped>
.title {
  text-align: center;
  margin: 20px 0;
  color: #333;
}

.line {
  height: 1px;
  background-color: #eee;
  margin: 10px 0;
}

.menu-container {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background-color: #545c64;
  padding: 8px 0;
}

.fixed-menu {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  overflow-x: auto;
  white-space: nowrap;
}

.el-menu--horizontal > .el-menu-item {
  padding: 8px 15px;
  font-size: 14px;
}
</style>

<style>
.el-menu--horizontal.el-menu {
  border-bottom: none !important;
}

.el-menu--horizontal > .el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.run-btn {
  background-color: rgba(46, 125, 50, 0.7) !important;
  border-radius: 4px;
}

.run-btn:hover {
  background-color: rgba(46, 125, 50, 0.9) !important;
}

.run-btn.is-active {
  background-color: rgba(46, 125, 50, 1) !important;
}

.visualize-btn {
  background-color: rgba(93, 64, 155, 0.7) !important;
  border-radius: 4px;
}

.visualize-btn:hover {
  background-color: rgba(93, 64, 155, 0.9) !important;
}

.visualize-btn.is-active {
  background-color: rgba(93, 64, 155, 1) !important;
}
</style>
